extends ./layout.pug

block content
  - const d = pageInfo.data
  - const daTitle = daurlAlias ? daurlAlias : daurl
  - const downloadName = (daTitle + '-' + options.browser + '-' + timestamp).replace(/(https?\:\/\/)|( )|(:)/ig, '')
  h1 Page summary

  h5.url
    a(href=daurl) #{decodeURIComponent(daTitle)}

  include ../includes/pageRunInfo

  if d.browsertime && d.browsertime.pageSummary
    b #{d.browsertime.pageSummary.info.title}
    p !{d.browsertime.pageSummary.info.description}

  if d.browsertime && d.browsertime.pageSummary && d.browsertime.pageSummary.markedAsFailure
    .errors
      b This test was marked as a failure with the following #{h.plural(d.browsertime.pageSummary.failureMessages.length, 'message')}:
      ul
        each failureMessage in d.browsertime.pageSummary.failureMessages
          li #{failureMessage}

  p
    .large#pageNavigation All runs:&nbsp;
      each val, index in runPages
        - value = Number(index) + 1
        a(href='./' + value + '.html') #{value}
        if (value === Object.keys(runPages).length)
          | &nbsp;-
          a(href='metrics.html') (side by side)
        else 
            | &nbsp;-
            |  

  if pageInfo.errors
    .errors
      b Errors
      ul
        each errors, tool in pageInfo.errors
          each error in errors
            li #{error} 
              b (#{tool})
  include ./tabs.pug

  #tabSections
    section#summary-panel
      small
        | | 
        a(href='#summary') Summary |
        | &nbsp;|&nbsp;
        if h.get(pageInfo.data, 'browsertime.pageSummary.statistics')
          a#browsertime-timing-statistics
        if options.browsertime.tcpdump
          a(href='#tcpdump') Download TCP dump
          | &nbsp;|&nbsp;
        if options.html.logDownloadLink
          a(href='#downloads') Download log
          | &nbsp;|&nbsp;
        if options.browsertime.video
          a(href='#downloads') Download Video
          | &nbsp;|&nbsp;
        if options.browsertime.chrome && options.browsertime.chrome.timeline
          a(href='#downloads') Download Timeline Log
          | &nbsp;|&nbsp;
        if d.browsertime && d.browsertime.har
          a(href='#downloads') Download HAR
          | &nbsp;|&nbsp;
        if options.browsertime.chrome && options.browsertime.chrome.collectConsoleLog
          a(href='#downloads') Download Console Logs
          | &nbsp;|&nbsp;

      a#summary
      h2 Summary
      .row
        .one-half.column
          table
            tr
              th Metric
              th Value
            - performanceScore = get(d, 'coach.pageSummary.advice.performance.score')
            tr
              th(colspan='2') Page metrics
            if performanceScore
              tr
                td Performance Score
                td #{performanceScore}
            - totalTransferSize = get(d, 'pagexray.pageSummary.transferSize')
            if totalTransferSize
              tr
                td Total Page Transfer Size
                td #{h.size.format(totalTransferSize)}
            - memory = get(d, 'browsertime.pageSummary.memory')
            if memory
              tr
                td Memory
                td #{h.size.format(memory)}
            - powerConsumption = get(d, 'browsertime.pageSummary.statistics.powerConsumption.median')
            if powerConsumption 
              tr
                td Firefox CPU Power Consumption
                td #{powerConsumption * 1000} mWh
            - requests = get(d, 'pagexray.pageSummary.requests')
            if requests
              tr
                td Requests
                td #{requests}
            - ttfb = get(d, 'browsertime.pageSummary.statistics.timings.pageTimings.backEndTime.median')
            tr
              th(colspan='2') Timing metrics
            if ttfb
              tr
                td TTFB [median]
                td #{h.time.ms(ttfb)}
            - firstPaint = get(d, 'browsertime.pageSummary.statistics.timings.firstPaint.median')
            if firstPaint
              tr
                td First Paint [median]
                td #{h.time.ms(firstPaint)}  
            - fullyLoaded = get(d, 'browsertime.pageSummary.statistics.timings.fullyLoaded.median')
            if fullyLoaded  
              tr
                td Fully Loaded [median]
                td #{h.time.ms(fullyLoaded)}
            - fcp = get(d, 'browsertime.pageSummary.statistics.timings.paintTiming["first-contentful-paint"].median') 
            - lcp = get(d, 'browsertime.pageSummary.statistics.timings.largestContentfulPaint.renderTime.median')
            - ttfb = get(d, 'browsertime.pageSummary.statistics.timings.pageTimings.backEndTime.median')
            - inp = get(d, 'browsertime.pageSummary.statistics.timings.interactionToNextPaint.median')
            if lcp
              tr
                th(colspan='2') Google Web Vitals     
            if ttfb
              tr
                td TTFB [median]
                td #{h.time.ms(ttfb)}
            if fcp
              tr
                td First Contentful Paint (FCP) [median]
                td #{h.time.ms(fcp)}         
            if lcp
              tr
                td Largest Contentful Paint (LCP) [median]
                td #{h.time.ms(lcp)}
            - cls = get(d, 'browsertime.pageSummary.statistics.pageinfo.cumulativeLayoutShift.median')
            if cls || cls === 0
                tr
                  td Cumulative Layout Shift (CLS) [median]
                  td #{cls.toFixed(2)}
            if inp
                tr
                  td Interaction To Next Paint (INP) [median]
                  td #{h.time.ms(inp)}
            - tbt = get(d, 'browsertime.pageSummary.statistics.cpu.longTasks.totalBlockingTime.median')
            if tbt  
              tr
                td Total Blocking Time [median]
                td #{h.time.ms(tbt)}
            - mpFID = get(d, 'browsertime.pageSummary.statistics.cpu.longTasks.maxPotentialFid.median')
            if mpFID
              tr
                td Max Potential FID [median]
                td #{h.time.ms(mpFID)}
            - longTasks = get(d, 'browsertime.pageSummary.statistics.cpu.longTasks.tasks.median')
            if longTasks
              tr
                th(colspan='2') CPU metrics
              tr
                td CPU long tasks [median]
                td #{longTasks}
            - maxLongTask= get(d, 'browsertime.pageSummary.statistics.cpu.longTasks.durations.max') 
            if maxLongTask 
              tr
                td CPU longest task duration
                td #{h.time.ms(maxLongTask)}
            - lastLongTask = get(d, 'browsertime.pageSummary.statistics.cpu.longTasks.lastLongTask.median') 
            if lastLongTask 
              tr
                td CPU last long task happens at
                td #{h.time.ms(lastLongTask)}
            - firstVisualChange = get(d, 'browsertime.pageSummary.statistics.visualMetrics.FirstVisualChange.median')
            if firstVisualChange
              tr
                th(colspan='2') Visual Metrics
              tr
                td First Visual Change [median]
                td #{h.time.ms(firstVisualChange)}
            - speedIndex = get(d, 'browsertime.pageSummary.statistics.visualMetrics.SpeedIndex.median')
            if speedIndex
              tr
                td Speed Index [median]
                td #{h.time.ms(speedIndex)}
            - visualComplete85 = get(d, 'browsertime.pageSummary.statistics.visualMetrics.VisualComplete85.median')
            if visualComplete85
              tr
                td Visual Complete 85% [median]
                td #{h.time.ms(visualComplete85)}
            - visualComplete99 = get(d, 'browsertime.pageSummary.statistics.visualMetrics.VisualComplete99.median')
            if visualComplete99
              tr
                td Visual Complete 99% [median]
                td #{h.time.ms(visualComplete99)}
            - lastVisualChange = get(d, 'browsertime.pageSummary.statistics.visualMetrics.LastVisualChange.median')
            if lastVisualChange
              tr
                td Last Visual Change [median]
                td #{h.time.ms(lastVisualChange)}
            - cruxFCP = get(d, 'crux.pageSummary.loadingExperience.ALL.data.record.metrics.first_contentful_paint.percentiles.p75');
            if cruxFCP
              tr
                th(colspan='2') Chrome User Experience Report (CRUX)
              tr
                td First Contentful Paint [p75]
                td #{h.time.ms(cruxFCP)}
            - cruxLCP = get(d, 'crux.pageSummary.loadingExperience.ALL.data.record.metrics.largest_contentful_paint.percentiles.p75');
            if cruxLCP
              tr
                td Largest Contentful Paint (LCP) [p75]
                td #{h.time.ms(cruxLCP)}
            - cruxFID = get(d, 'crux.pageSummary.loadingExperience.ALL.data.record.metrics.first_input_delay.percentiles.p75');
            if cruxFID
              tr
                td First Input Delay (FID) [p75]
                td #{h.time.ms(cruxFID)}
            - cruxCLS = get(d, 'crux.pageSummary.loadingExperience.ALL.data.record.metrics.cumulative_layout_shift.percentiles.p75');
            if cruxCLS || cruxCLS === 0
              tr
                td Cumulative Layout Shift (CLS) [p75]
                td #{Number(cruxCLS).toFixed(2)}
            if d.crux && d.crux.pageSummary && d.crux.pageSummary.loadingExperience && d.crux.pageSummary.loadingExperience.ALL && d.crux.pageSummary.loadingExperience.ALL.data && !d.browsertime
              - const cruxMetrics = {first_contentful_paint:'First Contentful Paint (FCP)', largest_contentful_paint: 'Largest Contentful Paint (LCP)', first_input_delay:'First Input Delay (FID)', cumulative_layout_shift: 'Cumulative Layout Shift'}; 
              each name, key in cruxMetrics
                if d.crux.pageSummary.loadingExperience.ALL.data.record.metrics[key]
                  tr 
                    td Fast #{name} (CrUx overall)
                    td #{Number(d.crux.pageSummary.loadingExperience.ALL.data.record.metrics[key].histogram[0].density * 100).toFixed(2)} %
                  tr 
                    td Moderate #{name} (CrUx overall)
                    td #{Number(d.crux.pageSummary.loadingExperience.ALL.data.record.metrics[key].histogram[1].density * 100).toFixed(2)} %
                  tr 
                    td Slow #{name} (CrUx overall)
                    td #{Number(d.crux.pageSummary.loadingExperience.ALL.data.record.metrics[key].histogram[2].density * 100).toFixed(2)} %
        .one-half.column
            if hasScreenShots
              - const width = options.mobile ? 150 : '100%';
              - const screenshotNo = medianRun ? medianRun.runIndex : 1
              - const screenshotName = 'data/screenshots/' + screenshotNo + '/afterPageCompleteCheck.' + screenShotType
              a(href=screenshotName)
                img.screenshot(src=screenshotName, width=width, alt='Screenshot of run ' + screenshotNo)
      include ./summaryBox.pug

      #downloads
      .downloads
        include ./downloads.pug
        include ./tcpdump.pug

    if d.browsertime && d.browsertime.har
      section#waterfall-panel
        include ../waterfall/index.pug

    if options.browsertime.video || options.browsertime.enableVideoRun
      section#video-panel
        include ../video/index.pug

    if (options.browsertime.video || options.browsertime.visualMetrics) && options.videoParams.createFilmstrip || options.browsertime.chrome && options.browsertime.chrome.enableTraceScreenshots
      section#filmstrip-panel
        include ../filmstrip/index.pug    

    if d.coach && d.coach.pageSummary
      section#coach-panel
        include ../coach/index.pug

    if d.browsertime && d.browsertime.pageSummary
      section#metrics-panel
        include ../metrics/index.pug

    if d.pagexray && d.pagexray.pageSummary
      section#pagexray-panel
        include ../pagexray/index.pug

    if options.cpu || options.browsertime && options.browsertime.chrome && options.browsertime.chrome.collectLongTasks || (options.browsertime && options.browsertime.firefox && options.browsertime.firefox.geckoProfiler || options.browsertime && options.browsertime.enableProfileRun)
      section#cpu-panel
        include ../cpu/index.pug  

    if d.thirdparty && d.thirdparty.pageSummary
      section#thirdparty-panel
        include ../thirdparty/index.pug

    each pageSummary in pageSummaries
      - const panelName = pageSummary.id + '-panel'
      section(id=panelName)
        p !{pugs[pageSummary.id]}
